<template>
  <div class="myself_page">
    <!-- 顶部 -->
    <div class="top">
      <img  class="img_head" :src="show_user_image |renderImg(160,160)" alt="">
      <div class="name">
          周杰伦
      </div>
      <div class="signature">
        上海企业
      </div>
    </div>
    <!-- 中部 -->
    <div class="center">
      <div class="item_center course">
        <div class="num">
          <font>23</font>门
        </div>
        <div class="text">课程完成数</div>
      </div>
      <div class="item_center class">
        <div class="num">
          <font>7</font>次
        </div>
        <div class="text">班级完成数</div>
      </div>
      <div class="item_center test">
        <div class="num">
          <font>16</font>场
        </div>
        <div class="text">班级完成数</div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottom">
      <ul class="ul_cell_pannel">
        <router-link tag="li" :to="{name:'mycourse'}">
        <div class="icon">
          <i class="iconfont icon-book"></i>
        </div>
        <div class="title">
          我的课程
        </div>
        <div class="right">
          <i class="iconfont icon-gt"></i>
        </div>
      </router-link>
      <router-link tag="li" :to="{name:'myclass'}">
        <div class="icon">
          <i class="iconfont icon-group"></i>
        </div>
        <div class="title">
          我的班级
        </div>
        <div class="right">
          <i class="iconfont icon-gt"></i>
        </div>
      </router-link>
      <router-link tag="li" :to="{name:'mytest'}">
        <div class="icon">
          <i class="iconfont icon-test"></i>
        </div>
        <div class="title">
          我的考试
        </div>
        <div class="right">
          <i class="iconfont icon-gt"></i>
        </div>
      </router-link>
      <router-link tag="li" :to="{name:'mycontrail'}">
        <div class="icon">
          <i class="iconfont icon-plan"></i>
        </div>
        <div class="title">
          学习轨迹
        </div>
        <div class="right">
          <i class="iconfont icon-gt"></i>
        </div>
      </router-link>
      <router-link tag="li" :to="{name:'myset'}">
        <div class="icon">
          <i class="iconfont icon-set"></i>
        </div>
        <div class="title">
          设置
        </div>
        <div class="right">
          <i class="iconfont icon-gt"></i>
        </div>
      </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "myself",
  data() {
    return {
      show_user_image:
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1822899106,40471411&fm=27&gp=0.jpg"
    };
  },
  mounted: function() {
    this.$nextTick(function() {
      //   this.getUserInfo();
    });
  },
  methods: {
    getUserInfo: function() {
      let params = {
        functioncode: "V0017",
        user_id: this.wx_user_id,
        mp_id: this.from_mp_id != "" ? this.from_mp_id : this.mp_id,
        check_id: 1 // 我的主页权限判断参数
      };
      this.api.get(params).then(data => {
        if (data.returncode == "000000" && data.record) {
          this.curUserInfo = data.record;

          this.show_user_image = this.curUserInfo.image;

          if (
            (this.show_user_image == "" ||
              this.show_user_image == "55974dfbb4b7067f746c5b26") &&
            this.curUserInfo.headimg &&
            this.curUserInfo.headimg != ""
          ) {
            this.show_user_image = this.curUserInfo.headimg;
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.myself_page {
  padding-bottom: 0.6rem;
  background: #f0f1f4;
  // 头部
  .top {
    height: 1.8rem;
    background: #24ceae;
    text-align: center;
    .img_head {
      height: 0.8rem;
      width: 0.8rem;
      border-radius: 50%;
      margin-top: 0.2rem;
    }
    .name {
      color: #fff;
      font-size: 0.18rem;
      margin-top: 0.1rem;
    }
    .signature {
      color: #fff;
      margin-top: 0.1rem;
      padding: 0 0.1rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  // 中部
  .center {
    margin-top: 0.1rem;
    padding: 0.125rem 0;
    display: flex;
    background: #ffffff;
    .item_center {
      flex: 1;
      border-right: 0.01rem solid #f1f1f1;
      &.text {
        border-right: none;
      }
      .num {
        height: 0.25rem;
        line-height: 0.25rem;
        font-size: 0.12rem;
        color: #444444;
        text-align: center;
        font {
          font-size: 0.16rem;
        }
      }
      .text {
        color: #444444;
        height: 0.25rem;
        line-height: 0.25rem;
        font-size: 0.12rem;
        text-align: center;
      }
    }
  }
  // 底部
  .bottom {
    margin-top: 0.1rem;
    .ul_cell_pannel {
      li {
        padding: 0 0.15rem;
        display: flex;
        align-items: center;
        height: 0.5rem;
        background: #fff;
        .icon {
          i.iconfont {
            font-weight: 500;
            margin: 0 0.1rem;
            font-size: 0.18rem;
            color: #4dd19b;
          }
        }
        .title {
          flex: 1;
          line-height: 0.5rem;
          border-bottom: 1px solid #e6e6e6;
        }
        .right {
          line-height: 0.5rem;
          border-bottom: 1px solid #e6e6e6;
          i.icon-right {
            margin: 0 0.1rem;
          }
        }
        &.li_gap,
        &:nth-child(4),
        &:last-child {
          margin-bottom: 0.1rem;
          .title,
          .right {
            border: none;
          }
        }
      }
    }
  }
}
</style>


